import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Footer extends Component {
    // 对接收的props进行类型及必要性的限制
    static propTyoes = {
        todos: PropTypes.array.isRequired,
        checkAllTodos: PropTypes.func.isRequired,
        clearAllDone: PropTypes.func.isRequired,
    }
    // 全选的回调
    handleCheckeAll = (event) => {
        this.props.checkAllTodos(event.target.checked)
    }
    // 清除已完成
    handleClearAllDone = () => {
        this.props.clearAllDone()
    }
    render() {
        const {todos} = this.props
        // 总数
        const total = todos.length
        // 已完成
        const doneCount = todos.reduce((pre, todo) => pre+(todo.done?1:0), 0) // 其中0是初始值
        return (
            <div className="todo-footer">
                <label>
                <input type="checkbox" checked={doneCount === total && total? true: false} onChange={this.handleCheckeAll}/>
                </label>
                <span>
                <span>已完成{doneCount}</span> / 全部{total}
                </span>
                <button className="btn btn-danger" onClick={this.handleClearAllDone}>清除已完成任务</button>
            </div>
        )
    }
}
